<script setup>
import { ref, onActivated, onDeactivated } from "vue";

const message = ref('')

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('B被激活')
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log('B被缓存')
})
</script>

<template>
  <div>
    <p>Current component: B</p>
    <div>
      <span>Message is: {{message}}</span>
      <input type="text" v-model="message">
    </div>
  </div>
</template>